<template>
	<view class="page flex-col">
		<cunstom_navigation_bar :title="`填写用餐信息`" :tapEvent="goback" :propStyles="propStyles"></cunstom_navigation_bar>
		<view class="infoBox">
			<view class="title">用餐信息</view>
			<view class="eachBox">
				<view class="left">
					<image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/diningInfo/icon1.png"></image>
					<span>厨师服务日期</span>
				</view>
				<view class="right"><uni-datetime-picker type="date" :clear-icon="false" v-model="dinnerDate"
						 /></view>
			</view>
			<view class="eachBox">
				<view class="left">
					<image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/diningInfo/icon2.png"></image>
					<span>用餐时间

					</span>
				</view>
				<view class="right"><uni-datetime-picker type="time" :clear-icon="false" v-model="dinnerTime"
						 /></view>
			</view>
			<view class="eachBox">
				<view class="left">
					<image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/diningInfo/icon3.png"></image>
					<span>用餐地点</span>
				</view>
				<view class="right" @tap="selectAddress">
					<span class="name" v-if="addressSelect.realname">{{addressSelect.address}}</span>
					<span v-else>请选择</span>
					></view>
			</view>
			<view class="eachBox">
				<view class="left">
					<image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/diningInfo/icon4.png"></image>
					<span>用餐人数</span>
				</view>
				<view class="right">
					<view class="sign" @tap="changeNum(-1)">-</view>
					<view class="num">{{num}}</view>
					<view class="sign" @tap="changeNum(1)">+</view>
				</view>
			</view>
		</view>
		<view class="textArea">
			<view>其他备注：</view>
			<uni-easyinput class="uni-mt-5" clearable v-model="extra" placeholder="请填写您其他要求"></uni-easyinput>
		</view>
		<view class="attention">

			<view class="title">注意事项</view>
			<view class="text">1、请提前48小时联系客服4009965156</view>
			<view class="text">2、此套餐不包含餐后清洁打扫工作。</view>
			<view class="text">3、此套餐菜品可协商更换。</view>
			<view class="text">
				4、此套餐的常规调料（油盐酱醋糖料酒等）由客户自备。
			</view>
			<view class="text">4、此套餐不适用节假日，如有需求，请联系客服。</view>
		</view>
		<view class="fixBar">
			<view class="checkbox">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" :checked="false" color="#84240E" style="transform:scale(0.5)" />

					</label>购买套餐即表示您同意注意事项<text class="red" @click="jumpStatement('privacy')">
						《预定须知》</text> <text class="red">《用户取消协议》</text>
					</text>
				</checkbox-group>
			</view>
			<view class="submit" @tap="submit()">提交</view>
		</view>

	</view>
</template>
<script>
	const util = require("@/utils/util.js");
	const api = require("@/utils/api.js");
	var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
	const mapChange = require('../utils/mapChange.js');

	const app = getApp();
	export default {
		data() {
			return {
				dinnerTime: '',
				dinnerDate: '',
				num: 1,
				openId: "",
				imgDomain: "",
				propStyles: {

					iconSrc: "black",
				},
				packageList: [],
				params: {
					page: 1,
					limit: 20,
					city: '苏州',
					longitude: 120.598346,
					latitude: 31.287181
				},
				selectedTypeIndex: -1,
				addressSelect: null, // 地址
				total: 0,
				package_id: null,

			};
		},
		computed: {

		},
		methods: {
			changeNum(add) {
				if (add == -1 && this.num == 1) {
					return
				}
				this.num = this.num + add
			},
			jumpUrl(e) {
				uni.navigateTo({

					url: e,
				});
			},
			changeType(index) {
				console.log('111', this.selectedTypeIndex);
				console.log('222', index);
				if (this.selectedTypeIndex != index) {
					this.selectedTypeIndex = index
				} else {
					this.selectedTypeIndex = 999
				}
			},
			jumpTo(url) {
				uni.navigateTo({
					url: url,
				})
			},
			
			selectAddress() {
				uni.navigateTo({
				    url: `/page_myAddress/myAddress?id=null&type=diningInfo`
				})
			},
			goback() {
				console.log("回去");
				uni.navigateBack();
			},
			// 套餐列表
			getPackageList() {
				util.request(api.packageList, this.params
					, 'GET', 'application/json').then(res => {
						if (res.code == 200) {
							this.packageList = res.data.data;
						}
					}).catch((err) => {
						console.log('err', err)

					});
			},
			submit(){
				if (!this.addressSelect.address  && !this.dinnerDate && !this.dinnerTime) {
				    util.toast('请选择用餐日期时间和地点')
				    return
				}
				
				
				let that = this;
				// 提交
				let formData = {
					user_id : app.globalData.user.user_id,
					receiver : this.addressSelect.realname,
					address : this.addressSelect.address,
					phone : this.addressSelect.mobile,
					use_time: this.dinnerDate+" "+this.dinnerTime,
					people_num: this.num,
					package_id: this.package_id,
				}
				
				util.request(api.orderAdd, formData
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						uni.navigateTo({
						    url: '/page_myOrder/myOrder'
						})
				    } 
				  }).catch((err) => {
				    console.log('err', err)
				    reject(err);
				  });
				
			}

		},
		onReady() { },
		// onShow(){

		//       },
		created() { },
		onShow: function () {
			// 地址
			this.addressSelect = uni.getStorageSync('addressSelect');
			console.log("->this.addressSelect:"+ JSON.stringify( this.addressSelect ));
		},



		onLoad: function (option) {

			//option为object类型，会序列化上个页面传递的参数
			// console.log('onload~~~购买页面', option);
			// this.mallProductId = option.mallProductId;
			// this.skuId = option.skuId
			// this.quantity = Number(option.quantity)
			// this.getOrderAddress(option.id)
			// this.startDate = this.getDate()

			this.imgDomain = process.env.VUE_APP_BASE_URL;
			this.package_id = option.package_id;
			this.getPackageList();
		},

	};
</script>
<style lang="scss">
	page {
		height: 100vh;
		overflow: auto;
		background: #F4F4F2;
	}
</style>
<style lang="scss" scoped>
	.infoBox {
		width: 750rpx;
		height: 620rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.title {
			padding-left: 40rpx;
			padding-top: 38rpx;
			padding-bottom: 16rpx;
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
		}

		.eachBox {
			height: 126rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 40rpx;
			padding-right: 28rpx;

			.left {
				display: flex;
				align-items: center;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}

			.right {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 0.6);
				display: flex;
				align-items: center;

				.sign {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					background: rgba(216, 216, 216, 0.3);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					color: #333333;
					text-align: center;
				}

				.num {
					margin: 0rpx 16rpx;
					text-align: center;
					width: 50rpx;
					height: 50rpx;
					background: #FECF01;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					line-height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 700;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.textArea {
		width: 750rpx;
		height: 146rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		padding-left: 44rpx;
	}

	.attention {
		.title {
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: rgba(51, 51, 51, 0.6);
			margin: 56rpx 0rpx 42rpx 44rpx;
		}

		.text {
			padding-left: 44rpx;
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(51, 51, 51, 0.8);
			line-height: 32rpx;
			margin-bottom: 28rpx;
		}

	}

	.fixBar {
		width: 750rpx;
		height: 158rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		padding-left: 44rpx;
		padding-right: 28rpx;
		.checkbox{
			font-size: 24rpx;
		}
		.red{
			color: #D93F11;
			font-size: 24rpx;
		}
		.submit {
			width: 226rpx;
			height: 98rpx;
			margin-left: 54rpx;
			line-height: 98rpx;
			background: #FECF01;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			text-align: center;

		}
	}

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>